<template>
    <div>
        <h1 style="text-align: center;">剖面建立—数据同步</h1>
        <div>
            <el-input v-model="keyword" placeholder="请输入内容" @change="slecetKey"></el-input>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary" @click="toAddZndb">添加页面</el-button>
            <el-button type="primary" @click="toZndbDialog">弹窗添加</el-button>
            <el-button type="primary" @click="synData">同步数据</el-button>
            <el-button type="primary" @click="postProcess">数据预处理</el-button>
            <el-button type="primary" @click="normalization">归一化处理</el-button>
        </div>
        <div class="wrapper">
            <el-table :data="tableData" style="width: 100%; max-height: 400px;overflow: auto; ">
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                <el-table-column label="序号">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="po" label="po">
                </el-table-column>
                <el-table-column prop="ph" label="ph">
                </el-table-column>
                <el-table-column prop="vo" label="vo">
                </el-table-column>
                <el-table-column prop="vn" label="vn">
                </el-table-column>
                <el-table-column prop="n" label="n">
                </el-table-column>
                <el-table-column prop="sh" label="sh">
                </el-table-column>
                <el-table-column prop="sh2" label="sh2">
                </el-table-column>
                <el-table-column prop="so" label="so">
                </el-table-column>
                <el-table-column prop="tg" label="tg">
                </el-table-column>
                <el-table-column prop="arf" label="arf">
                </el-table-column>
                <el-table-column prop="uti" label="uti">
                </el-table-column>
                <el-table-column prop="well_name" label="well_name">
                </el-table-column>
                <el-table-column prop="depth" label="depth">
                </el-table-column>
            </el-table>
            <MyPagination :currentPage="currentPage" :pageSize="pageSize" :total="total" @newValue="handleSizeChange"
                @newCurrentPage="handleCurrentChange" />
        </div>
        <ZndbDialog ref="zndbDialog" />
    </div>
</template>

<script>
import api from '@/api/api.js';
import MyPagination from '@/components/MyPagination.vue';
import ZndbDialog from './ZndbDialog.vue';

export default {
    components: {
        MyPagination,
        ZndbDialog
    },
    name: 'YourComponent',
    data() {
        return {
            keyword: '',
            input: '',
            tableData: [],
            //分页查询参数
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            total: 0, // 数据总条数
        }
    },
    created() {
        console.log('进入商品页面!!!');
        this.getPmjlList(this.currentPage);
        // this.getEchartsList();
    },
    methods: {
        getPmjlList(val) {
            const dataToSend = {
                currentPage: val,
                keyword: this.keyword,
            };
            api.post('/pmjl/getPmjlList', dataToSend)
                .then(response => {
                    // 处理成功的响应
                    this.tableData = response.data.pmjlList;
                    this.total = response.data.total
                })
                .catch(error => {
                    // 处理错误情况
                    console.error('There was an error!', error);
                });
        },
        postProcess(){
            api.post('/pmjl/postProcessData')
                .then(response => {
                    // 处理成功的响应
                    window.location.reload();
                })
                .catch(error => {
                    // 处理错误情况
                    console.error('There was an error!', error);
                });
        },
        normalization(){
            api.post('/pmjl/normalizationData')
                .then(response => {
                    // 处理成功的响应
                    window.location.reload();
                })
                .catch(error => {
                    // 处理错误情况
                    console.error('There was an error!', error);
                });
        },
        synData() {
            api.post('/pmjl/synData')
                .then(response => {
                    // 处理成功的响应
                    window.location.reload();
                })
                .catch(error => {
                    // 处理错误情况
                    console.error('There was an error!', error);
                });
        },

        handleSizeChange(a, b) {
            // this.pageSize = val; // 改变每页显示的条数
            // this.currentPage = 1; // 重置当前页为第一页
            this.currentPage = b, // 当前页码
                this.pageSize = a // 每页显示条数

        },
        handleCurrentChange(c) {
            // this.currentPage = val; // 改变当前页码
            console.log('当前页码:', c);
            this.currentPage = c // 当前页码
            // getZndbList(this.currentPage)
        },
        slecetKey(val) {
            console.log('Input value changed:', val);
            this.keyword = val;
            this.getPmjlList(this.currentPage);
        },
        toAddZndb() {
            console.log('跳转到addZndb页面!!!');
            this.$router.push('/addZndb');
        },
        toZndbDialog() {
            this.$refs.zndbDialog.dialogVisible = true;
        }
    },
}
</script>

<style lang="less">
.el-table .el-table__cell {
    padding: 0px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}
</style>